<template>
    <div class="home">
        <!--标题栏-->
        <div id="header">
            <!--时间-->
            <div id="nowTime">{{ nowTime }}</div>
            <!--日期和星期-->
            <div id="nowDate">{{ nowDate }}</div>
            <span id="title">电气线路图</span>
            <div id="edit">
                <el-button type="primary" @click="editChange">编辑</el-button>
            </div>
        </div>
        <div
            class="canvas"
            :style="{
                ...getCanvasStyle(canvasStyleData),
                width: '100vw',
                height: '100vh',
            }"
        >
            <!-- 渲染 componentData -->
            <ComponentWrapper v-for="(item, index) in componentData" :key="index" :config="item"/>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import {getCanvasStyle} from '@/utils/style'
import {mapState} from 'vuex'
import ComponentWrapper from './ComponentWrapper'
import {deepCopy} from '@/utils/utils'

export default {
    components: {ComponentWrapper},
    props: {
        isScreenshot: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            copyData: [],
            nowTime: '13:58:59', // 时间
            nowDate: '2023年7月17日 星期一', // 日期和星期
        }
    },
    computed: mapState([
        'componentData',
        'canvasStyleData',
        'points',
    ]),
    created() {
        console.log('componentData', this.$store.state.componentData)
        this.$set(this, 'copyData', deepCopy(this.componentData))
    },
    mounted() {
        this.currentTime()
    },
    methods: {
        getCanvasStyle,
        editChange() {
            this.$router.push('/')
        },
        currentTime() {
            setInterval(this.formatDate, 500);
        },
        formatDate() {
            let date = new Date();
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月
            let day = date.getDate(); // 日
            let week = date.getDay(); // 星期
            let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
            let hour = date.getHours(); // 时
            hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
            let minute = date.getMinutes(); // 分
            minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
            let second = date.getSeconds(); // 秒
            second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
            this.nowDate = `${year}年${month}月${day}日 ${weekArr[week]}`;
            this.nowTime = `${hour}:${minute}:${second}`;
        },
    },
    // 销毁定时器
    beforeDestroy() {
        if (this.formatDate) {
            clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
        }
    }
}
</script>

<style lang="scss" scoped>
    /* 头部 */
    #header {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-image: url('../../assets/光@2x.png');
        background-size: 100% 120%;
        background-repeat: no-repeat;
        width: 100%;
        height: 10%;
        background-color: #081138;
        border: rgb(55, 56, 154) 2px solid;
        box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
    }

    #header #nowTime {
        color: white;
        width: 12rem;
        height: 5rem;
        line-height: 7rem;
        font-size: 30px;
        vertical-align: middle;
        text-align: right;
    }

    #header #nowDate {
        color: white;
        width: 15rem;
        height: 5rem;
        line-height: 7.5rem;
        font-size: 16px;
        margin-left: 2rem;
    }

    #header #title {
        text-align: center;
        font-weight: bold;
        font-size: 1.6rem;
        letter-spacing: 10px;
        color: white;
        line-height: 3.8rem;
        width: 42.5rem;
        height: 100%;
    }

    #header #edit {
        width: 10rem;
        height: 5rem;
        line-height: 7.5rem;
        text-align: center;
        margin-left: 15rem;
    }

    //.canvas {
    //    background: #081138;
    //}
</style>
